<template>
  <div class="wrap">
    <el-card class="header-card">
      <div class="item">
        <p class="font-bold">店铺：店铺名（用户名）</p>
        <p class="font-bold">货件单号：Mino-20230625-0001</p>
        <p>制单时间：{{data.createTime}}</p>
        <p>入库时间：{{data.createTime}}</p>
        <p>
          <span style="margin-right: 20px">预计入库SKU（种）：{{data.goodsNum}}</span>
          <span>预计入库商品总数：{{data.num}}</span>
        </p>
        <p >
          <span style="margin-right: 20px">实际入库SKU（种）：<strong class="true-number">{{data.realGoodsNum}}</strong></span>
          <span>实际入库商品总数：<strong class="true-number">{{data.realNum}}</strong></span>
        </p>
        <p v-if="data.status === 1">
          <span class="mgr20">管理员：{{ data.typeStr }}</span>
        </p>
      </div>
    </el-card>
    <div>
      <h4>货件详细情况</h4>
      <div class="table">

        <el-table
          :data="shipmentData"
          :border="true"
          style="width: 1200px"
        >
          <el-table-column
            prop="image"
            label="箱子尺寸"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="预计入库数量"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="实际入库数量"
            align="center"
          >
            <template slot-scope="{row}">
              <el-input-number v-model="row.remark" placeholder="请填写" :controls="false" :min="0" :precision="0"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            label="仓库剩余数量"
            prop="num"
            align="center"
          ></el-table-column>
        </el-table>

      </div>
    </div>

    <div>
      <h4>商品详情情况</h4>
      <div class="table">
        <el-table
          :data="goodsData"
          :border="true"
          class="goods-table"
        >
          <el-table-column
            prop="image"
            label="商品封面"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            align="left"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
              <div>
                <div class="goods-title">Fritadeira Panela Fazer</div>
                <div class="goods-attr">Color : 3 Furos</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="Listing ID与SKU"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="预计入库数量"
            prop="num"
            align="center"
          ></el-table-column>
          <el-table-column
            label="实际入库数量"
            prop="num"
            align="center"
          >
            <template slot-scope="{row}">
              <el-input-number v-model="row.remark" placeholder="请填写" :controls="false" :min="0" :precision="0"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="table-tips">
      <p>请填写实际入库数量，不能留空</p>
      <p>填写“0”则代表当前商品/箱子未入库（从货件中移除）</p>
      <p class="font-red">如若实际商品和箱子的入库数量与预计入库数量有差异，请先与用户沟通确认</p>
    </div>

    <div class="remark">
      <h4>备注信息：</h4>
      <el-input type="textarea" placeholder="请填写备注信息"></el-input>
    </div>

    <div class="footer" style="margin-top: 30px">
      <el-button type="info" @click="goBack">返回</el-button>
      <el-button type="primary" @click="confirmTable">确认入库</el-button>
      <el-button type="danger" @click="deliver">确认送仓</el-button>
    </div>
  </div>

</template>

<script>
export default {
  name: "shipmentInfo",
  data(){
    return {
      data: [],
      shipmentData: [
        {}
      ], // 货件
      goodsData: [
        {}
      ], // 商品
    }
  },
  methods:{
    confirmTable(){
      this.$alert(
        `<p><span style="color: #FF0000">实际入库数量与预计入库数量（箱子或SKU）有差异，请先与用户沟通确认</span></p>`,
        '确认入库？',
        {
          dangerouslyUseHTMLString:true,
          // type:'warning',
          showCancelButton:true,
        }
      )
        .then(res=>{
          //

        })
        .catch(res=>{

        })
    },
    // 确认送仓
    deliver(){
      this.$alert(
        `<p><span style="color: #FF0000">确认该货件已成功送入美客多官方仓？</span></p>` +
        `<p>确认后，当前货件将在第二天起不再收取仓储费</p>`,
        '确认送仓？',
        {
          dangerouslyUseHTMLString:true,
          // type:'warning',
          showCancelButton:true,
        }
      )
        .then(res=>{
          //

        })
        .catch(res=>{

        })
    },

  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.table-tips{

}
</style>
